<template>
	<div>
		<Echart :options="options" id="centreLeft1Chart" height="480px" width="100%"></Echart>
	</div>
</template>

<script>
	import Echart from '@/common/echart'
	export default {
		data() {
			return {
				options: {},
			}
		},
		components: {
			Echart
		},
		props: {
			cdata: {
				type: Object,
				default: () => ({})
			}
		},
		watch: {
			cdata: {
				handler(newData) {
					this.options = {
						tooltip: {
							trigger: 'axis',
							axisPointer: {
								type: 'shadow'
							}
						},
						grid: {
							left: '0%',
							top: '10px',
							right: '0%',
							bottom: '4%',
							containLabel: true
						},
						xAxis: [{
							type: 'category',
							data: newData.xData,
							axisLine: {
								show: true,
								lineStyle: {
									color: "rgba(255,255,255,.1)",
									width: 1,
									type: "solid"
								},
							},

							axisTick: {
								show: false,
							},
							axisLabel: {
								interval: 0,
								// rotate:50,
								show: true,
								splitNumber: 15,
								textStyle: {
									color: "rgba(255,255,255,.6)",
									fontSize: '12',
								},
							},
						}],
						yAxis: [{
							type: 'value',
							axisLabel: {
								//formatter: '{value} %'
								show: true,
								textStyle: {
									color: "rgba(255,255,255,.6)",
									fontSize: '12',
								},
							},
							axisTick: {
								show: false,
							},
							axisLine: {
								show: true,
								lineStyle: {
									color: "rgba(255,255,255,.1	)",
									width: 1,
									type: "solid"
								},
							},
							splitLine: {
								lineStyle: {
									color: "rgba(255,255,255,.1)",
								}
							}
						}],
						series: [{
								type: 'bar',
								data: newData.yData,
								barWidth: '35%', //柱子宽度
								// barGap: 1, //柱子之间间距
								itemStyle: {
									normal: {
										color: '#5E4FE7',
										opacity: 1,
										barBorderRadius: 5,
									}
								}
							}

						]
					}
				},
				immediate: true,
				deep: true
			}
		}
	}
</script>
